<template>
	<view class="medical-record-page">
		<!-- 顶部就诊人信息卡 -->
		<view class="user-card">
			<image class="avatar" :src="user.avatar" />
			<view class="user-info">
				<view class="user-name">{{ user.name }}</view>
				<view class="user-id">{{ user.idMasked }}</view>
			</view>
		</view>

		<!-- Tab栏组件 -->
		<Tabs :activeTab="activeTab" @change-tab="changeTab" />

		<!-- 就诊信息 -->
		<view class="section-card">
			<view class="title-container">
				<view class="section-title">就诊信息</view>
			</view>
			<view class="form-row">
				<view class="form-label">就诊医生：</view>
				<view class="form-value">肖战（副主任医师）</view>
			</view>
			<view class="form-row">
				<view class="form-label">就诊方式：</view>
				<view class="form-value">图文问诊</view>
			</view>
			<view class="form-row">
				<view class="form-label">就诊时间：</view>
				<view class="form-value">2013-09-23</view>
			</view>
			<view class="form-row">
				<view class="form-label">诊断结果：</view>
				<view class="form-value">急性上呼吸道感染</view>
			</view>
		</view>

		<!-- 动态显示的内容 -->
		<Prescription v-if="activeTab === 'prescription'" :medicines="medicines" />
		<MedicalGuidance v-else-if="activeTab === 'medicalGuidance'" :medicines="medicines" />
		<Examine v-else-if="activeTab === 'examine'" :tests="tests" />

		<!-- 下载按钮 -->
		<button class="next-btn" @click="downloadRecord">下载病历</button>
	</view>
</template>

<script>
	import Tabs from './components/tabs.vue'
	import Prescription from './components/prescription.vue'
	import MedicalGuidance from './components/medicalGuidance.vue'
	import Examine from './components/examine.vue'

	export default {
		components: {
			Tabs,
			Prescription,
			MedicalGuidance,
			Examine
		},
		data() {
			return {
				user: {
					avatar: '/static/images/patient/user-avatar.jpg',
					name: '王依依',
					idMasked: '511**************5647',
				},
				activeTab: 'prescription',
				medicines: [{
						name: '左氧氟沙星',
						spec: '0.5g×100片/瓶',
						quantity: '12片',
						dosage: '每日一次，每次三片'
					},
					{
						name: '左氧氟沙星',
						spec: '0.5g×100片/瓶',
						quantity: '12片',
						dosage: '每日一次，每次三片'
					},
					{
						name: '双黄连合剂',
						spec: '0.5g×100片/瓶',
						quantity: '2盒',
						dosage: '每日三次，每次一片'
					}
				],
				tests: [{
						name: 'dr检查',
						no: '123',
						quantity: '1次'
					},
					{
						name: '血常规',
						no: '999',
						quantity: '1次'
					}
				]
			}
		},
		methods: {
			changeTab(tab) {
				this.activeTab = tab;
			},
			downloadRecord() {
				uni.showToast({
					title: '病历下载中...',
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.medical-record-page {
		background: #fff;
		min-height: 100vh;
		padding: 30rpx 30rpx 40rpx;
	}

	.user-card {
		display: flex;
		align-items: center;
		background: linear-gradient(90deg, #F0FEFF 0%, #b6e0f7 85%, #F0FEFF 100%);
		border-radius: 16rpx;
		padding: 32rpx 40rpx 24rpx;
		position: relative;
	}

	.avatar {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.user-info {
		flex: 1;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
	}

	.user-id {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.next-btn {
		width: 80%;
		margin: 40rpx 5% 0 10%;
		height: 66rpx;
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 28rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 66rpx;
		box-shadow: 0 4rpx 12rpx rgba(65, 207, 230, 0.15);
		border: none;
	}

	.section-card {
		margin-bottom: 40rpx;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 8rpx 14rpx rgba(0, 0, 0, 0.08);
		background: linear-gradient(#F0FEFF 0%, #fff 100%);
	}

	.title-container {
		position: relative;
		margin-bottom: 18rpx;
	}

	.section-title {
		position: relative;
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		z-index: 1;
	}

	.form-row {
		display: flex;
		padding: 0 6rpx;
		margin: 16rpx 0;
		font-size: 30rpx;
	}

	.form-label {
		color: #666;
	}

	.form-value {
		flex: 1;
		color: #333;
		font-size: 30rpx;
	}
</style>